<template>
	<main>
		<el-row style="text-align: right;margin-bottom: 20px;">
			<el-button @click.native="create">
				<icon name="plus"></icon>
			</el-button>
		</el-row>
		<el-row>
			<el-table :data="appList" border>
				<el-table-column label="App名称" width="280">
					<template slot-scope="scope">
						{{scope.row.appName}}
					</template>
				</el-table-column>

				<el-table-column label="App描述">
					<template slot-scope="scope">
						{{scope.row.appDesc}}
					</template>
				</el-table-column>
				<el-table-column label="App类型" >
					<template slot-scope="scope">
						{{scope.row.appType.appTypeName}}
					</template>
				</el-table-column>

				<el-table-column label="操作" width="70">
					<template slot-scope="scope" >
						<el-button size="small" @click="edit(scope.row)">
							<template>
								<icon name="pencil-alt"></icon>
							</template>
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-row>

		<el-dialog title="新建App" :visible.sync="createDialog">
			<el-form label-width="100px">
				<el-form-item label="App名称">
					<el-input v-model="newApp.name"></el-input>
				</el-form-item>
				<el-form-item label="App描述">
					<el-input v-model="newApp.description"></el-input>
				</el-form-item>
				<el-form-item label="App类型">
					<el-select v-model="newApp.type">
						<el-option v-for="type of appTypeList" :key="type.id" :label="type.appTypeName" :value="type.id"></el-option>
					</el-select>
				</el-form-item>
				<el-row style="text-align: right">
					<el-button @click.native="resetData">取消</el-button>
					<el-button @click.native="submitNewApp" type="primary">提交</el-button>
				</el-row>
			</el-form>
		</el-dialog>
		<el-dialog title="编辑App" :visible.sync="editDialog">
			<el-form label-width="100px">
				<el-form-item label="App名称">
					<el-input v-model="editApp.name"></el-input>
				</el-form-item>
				<el-form-item label="App描述">
					<el-input v-model="editApp.description"></el-input>
				</el-form-item>
				<el-form-item label="App类型">
					<el-select v-model="editApp.type">
						<el-option v-for="type of appTypeList" :key="type.id" :label="type.appTypeName" :value="type.id"></el-option>
					</el-select>
				</el-form-item>
				<el-row style="text-align: right">
					<el-button @click.native="resetData">取消</el-button>
					<el-button @click.native="submitEditApp" type="primary">提交</el-button>
				</el-row>
			</el-form>
		</el-dialog>
	</main>
</template>

<script>
	export default {
		name: 'management-app',
		data(){
			return {
				appList:[],
				appTypeList:[],
				createDialog:false,
				editDialog:false,
				newApp:{name:'',description:'',type:''},
				editApp:{id:'',name:'',description:'',type:''},
			}
		},
		methods:{
			validateData(data){
				let error;
				if(!data.name) error = 'App名称';
				if(!data.description) error = 'App描述';
				if(!data.type) error = 'App类型';
				if(error){
					this.$message({type:'error',message:error+'不能为空'});
					return false;
				}else{
					return true;
				}
			},
			submitNewApp(){
				if(this.validateData(this.newApp)){
					this.$store.dispatch({
						type:'fetch',
						name:'createApp',
						data:{
							appName:this.newApp.name,
							appDesc:this.newApp.description,
							appType:this.newApp.type
						}
					}).then(res=>{
						if(!res.errCode){
							this.resetData();
							this.$message({type:'success',message:'提交成功'})
						}else{
							console.log(res);
							this.$message({type:'error',message:'操作失败'})
						}
					}).catch(error=>{
						console.log(error);
						this.$message({type:'error',message:'操作失败'})
					})
				}
			},
			submitEditApp(){
				if(this.validateData(this.editApp)){
					this.$store.dispatch({
						type:'fetch',
						name:'editApp',
						data:{
							id:this.editApp.id,
							appName:this.editApp.name,
							appDesc:this.editApp.description,
							appType:this.editApp.type
						}
					}).then(res=>{
						if(!res.errCode){
							this.resetData();
							this.$message({type:'success',message:'编辑成功'})
						}else{
							console.log(res);
							this.$message({type:'error',message:'操作失败'})
						}
					}).catch(error=>{
						console.log(error);
						this.$message({type:'error',message:'操作失败'})
					})
				}
			},
			resetData(){
				this.editDialog = false;
				this.createDialog = false;
				this.newApp = {name:'',description:'',type:''};
				this.editApp = {id:'',name:'',description:'',type:''};
				this.fetchApps();
			},
			create(){
				this.createDialog = true;
			},
			edit(row){
				this.editApp.id = row.id;
				this.editApp.name = row.appName;
				this.editApp.description = row.appDesc;
				this.editApp.type = row.appType.id;
				this.editDialog = true;
			},
			fetchApps(){
				this.$store.dispatch({
					type:'fetch',
					name:'getAppList'
				}).then(res=>{
					console.log(res);
					if(!res.errMsg){
						console.log(res);
						this.appList = res;
					}else{
						this.$message({type:'error',message:'获取不到app'});
					}
				}).catch(error=>{
					console.log(error);
					this.$message({type:'error',message:'获取不到app'});
				})
			},
			fetchAppTypes(){
				this.$store.dispatch({type:'fetch',name:'getAppTypeList'})
					.then(res=>{
						if(!res.errMsg){
							this.appTypeList = res;
						}else{
							this.$message({type:'error',message:'获取不到App类型列表'})
						}
					})
					.catch(error=>{
						this.$message({type:'error',message:'获取不到App类型列表'})
					})
			},
			fetchAppTypes(){
				this.$store.dispatch({
					type:'fetch',
					name:'getAppTypes',
				}).then(res=>{
					if(!res.errCode){
						this.appTypeList = res;
					}else{
						this.$message({type:'error',message:'获取不到app类型'});
					}
				}).catch(error=>{
					this.$message({type:'error',message:'获取不到app类型'});
				})
			}
		},
		created(){
			this.fetchApps();
			this.fetchAppTypes();
		},
	}
</script>
